<template>
  <div>
    <button @click="go">go</button>
    <el-row>
      <el-col :span="12">
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="selectChange"
          clearable
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="title"
          size="small"
          clearable
          label="名称"
          @input="inpSearch"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="id" width="120"> </el-table-column>
          <el-table-column prop="title" label="名称" width="120">
          </el-table-column>

          <el-table-column
            prop="category_id"
            label="品类"
            width="300"
          ></el-table-column>
          <el-table-column prop="status" label="状态" width="300">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="120">
          </el-table-column>
          <el-table-column prop="coupon_price" label="面值" width="300">
          </el-table-column>
          <el-table-column prop="use_min_price" label="最低消费" width="300">
          </el-table-column>
          <el-table-column prop="coupon_time" label="有效时间" width="300">
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope" style="display:flex">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >记录</el-button
              >
              <el-button type="text" size="small" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="limit"
          :current-page="page"
          @current-change="pageChange"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <span slot="title" class="dialog-title">
        <i class="el-icon-question"></i>
        删除商品分类
      </span>
      <span>确定要删除商品分类吗？ 删除商品分类后将无法恢复，请谨慎操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDel">确 定</el-button>
      </span>
    </el-dialog>

    <Dialog :show="tableDialogTableVisible" :id='id' />
  </div>
</template>

<script>
import { getDiscountList, delDiscount, getHistory } from "../../api";
import Dialog from "../../components/Dialog";
export default {
  nameL: "discount",
  components: { Dialog },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "有效",
        },
        {
          value: "0",
          label: "失效",
        },
      ],
      dialogVisible: false,
      tableDialogTableVisible: false,
      delID: "",
      tableData: [],
      total: 0,
      page: 1,
      limit: 3,
      title: "",
      status: "",
      value: "",
      id:0
    };
  },

  methods: {
    go() {
      this.$router.push("/");
    },
    handleClick(row) {
     this.tableDialogTableVisible=true
    
    },
    pageChange(e) {
      sessionStorage.setItem("page", e);
      this.page = sessionStorage.getItem("page");
      this.getData();
    },
    getData() {
      getDiscountList({
        page: this.page,
        limit: this.limit,
        status: this.status,
        title: this.title,
      }).then((res) => {
        if (res.data.status == 200) {
          console.log(res.data.data);
          this.total = res.data.data.count;
          this.tableData = res.data.data.list;
        }
      });
    },
    selectChange(e) {
      this.status = e;
      this.getData();
    },
    inpSearch() {
      this.getData();
    },
    del(e) {
      this.delID = e.id;
      this.dialogVisible = true;
    },
    confirmDel() {
      delDiscount(this.delID).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.$message({ type: "success", message: res.data.msg });
          this.getData();
        } else {
          this.$message({ type: "success", message: res.data.msg });
        }
        this.dialogVisible = false;
      });
    },
  },
  created() {
    this.getData();
  },
  activated() {},
};
</script>
<style lang="less" scoped></style>
